<template>
	<view class="sbody">
		<!-- 系统用户指派维修人员 -->
		<view>
			<view class="detail_list">
				<view class="detail_item">
					<text>报修企业：</text>
					<text class="detail_item_infos" style="color:#1884eb;">{{recordList.compName}}</text>
				</view>
				<view class="detail_item">
					<text>服务时间：</text>
					<text class="detail_item_infos">{{recordList.serviceTime}}</text>
				</view>
				<view class="detail_item">
					<text>联系人：</text>
					<text v-if="recordList.userName != null" class="detail_item_infos">{{recordList.userName}}</text>
				</view>
				<view class="detail_item">
					<text>联系电话：</text>
					<text v-if="recordList.userPhone != null" class="detail_item_infos">{{recordList.userPhone}}</text>
				</view>
				<view class="detail_item">
					<text>状 态：</text>
					<view>
						<view v-for="item in statusOptions">
							<text class="detail_item_infos" style="color:#1884eb;"
								v-if="item.dictValue === recordList.serviceStatus && recordList.serviceStatus != '1'">{{item.dictLabel}}</text>
						</view>
						<view v-for="item in statusOptions">
							<text class="detail_item_infos" style="color:#00d8a0;"
								v-if="test(item)">{{item.dictLabel}}</text>
						</view>
					</view>
				</view>
				<view class="detail_item_img">
					<text>附 件：</text>
					<view class="img">
						<image :src="recordList.matterImg"></image>
					</view>
				</view>
				<view class="detail_item_des">
					<text>描 述：</text>
					<text class="detail_item_info">{{recordList.serviceMatter}}</text>
				</view>

				<view class="submitButton" v-if="recordList.serverId === null"
					style="display: flex;justify-content: flex-end;">
					<button @click="send" style="width: 90%; background-color: #1884eb;color: white;">立即派工</button>
				</view>
				<view class="submitButton" v-else style="display: flex;justify-content: flex-end;">
					<button :disabled="true"
						style="width: 90%; background-color: #a3d1fe;color: white;">已派工给：{{recordList.serviceName}}</button>
				</view>
			</view>

			<!-- 派工弹出框 -->
			<uni-popup class="finish_popup" ref="popup" type="center" @change="sum=0">
				<view class="uni-popup__wrapper center">
					<view class="popup_box">
						<view class="popup_box_top">
							<view class="popup_box_cancel" @click="changeCancel">取消</view>
							<view class="popup_box_sure" @click="changeSure">确定</view>
						</view>
						<view class="popup_box_search">
							<input class="search_box" type="text" v-model="searchKey" confirm-type="search"
								@change="changeSearch" placeholder="搜索姓名" style="width: 90%;" />
						</view>
						<scroll-view scroll-y="true" style="width: 100%; height: 62%;" lower-threshold="50">
							<radio-group @change="changeChecked" class="popup_box_list">
								<view class="box_list_line" style="font-size: 12px;height: 15%;"
									v-for="item,index in servicerList">
									<label style="margin-top: 2%;">
										<radio style="transform:scale(0.6);" :value="item.phoneNumber"
											:checked="index === current" />
										<text class="line_name">{{item.userName}}</text>
										<text class="line_type">{{item.dept.deptName}}</text>
									</label>
									<view style="color: #999999;font-size: 12px;height: 15%;">
										<text>空闲</text>
									</view>
								</view>
							</radio-group>
						</scroll-view>
					</view>
				</view>
			</uni-popup>
		</view>


	</view>
</template>

<script>
	import {
		getRecord,
		updateRecord
	} from '@/common/js/api/serviceRecord.js';
	import {
		getDicts
	} from '@/common/js/api/dict/data.js';
	import {
		listUserServicer
	} from '@/common/js/api/user.js';

	export default {
		data() {
			return {
				recordList: [],
				//服务状态字典
				statusOptions: [],
				//维修人员列表
				servicerList: [],
				//缴费类型字典
				typeOptions: [],
				//单选框默认状态
				checkedStatus: false,
				//指派维修人员
				current: '',
				//被指派维修人员基本信息
				servicerInfo: [],
				//点击报修管理传递的字段
				name: "",
				//登陆人员基本信息
				userInfo: [],
				searchKey: "",
			}
		},
		onLoad(options) {
			this.getServiceListById(options.serviceId)
			this.getDictsList()
			this.userInfo = uni.getStorageSync('userInfo')
			this.getServicerList()

		},
		methods: {
			//获取报修详情
			getServiceListById(serviceId) {
				getRecord(serviceId).then(res => {
					this.recordList = res.data
				})
			},
			test(item) {
				return item.dictValue === this.recordList.serviceStatus && this.recordList.serviceStatus === '1'
			},
			//获取字典信息
			getDictsList() {
				getDicts('t_service_status').then(res => {
					this.statusOptions = res.data
				});
				getDicts('t_staff_type').then(res => {
					this.typeOptions = res.data
				})
			},
			//获取维修人员列表
			getServicerList() {
				let param = {
					'userName': this.searchKey,
				}
				listUserServicer(param).then(res => {
					let newList = res.rows
					this.servicerList = []
					for (let i in newList) {
						for (let j in newList[i].roles) {
							if (newList[i].roles[j].roleId === 109) {
								this.servicerList.push(newList[i])
							}
						}
					}
				})
			},
			//打开弹窗
			send() {
				this.$nextTick(function() {
					this.$refs.popup.open()
					this.getServicerList()
				})
			},
			//取消
			changeCancel() {
				this.checkedStatus = false
				this.searchKey = ""
				this.$nextTick(function() {
					this.$refs.popup.close()
				})
			},
			//提交
			changeSure() {
				//筛选所有选中的数据
				if (this.servicerInfo.length < 1) {
					//提示需要选中
					uni.showToast({
						title: "请选择维修工人",
						icon: 'none',
						duration: 2000
					})
				} else {
					let data = {};
					data.serviceId = this.recordList.serviceId
					data.serverId = this.servicerInfo.userId
					data.serviceName = this.servicerInfo.userName
					data.serverPhone = this.servicerInfo.phoneNumber
					updateRecord(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "指派成功",
								duration: 2000,
							})
						} else {
							uni.showToast({
								title: "指派失败",
								duration: 2000
							})
						}
					})
					this.getServiceListById(data.serviceId)
					this.$nextTick(function() {
						this.$refs.popup.close()
					})
				}
			},
			//选择维修人员
			changeChecked(index) {
				console.log(index)
				for (let i = 0; i < this.servicerList.length; i++) {
					if (this.servicerList[i].phoneNumber === index.detail.value) {
						this.current = i;
						this.servicerInfo = this.servicerList[i]
						console.log(this.servicerInfo)
						break;
					}
				}
			},
			changeSearch() {
				this.servicerList = []
				this.getServicerList(this.searchKey)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.detail_list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
	}

	.detail_item {
		width: 90%;
		height: 20%;
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 14px;
	}

	.detail_item_img,
	.detail_item_des {
		width: 90%;
		height: 25%;
		display: flex;
		padding-top: 20px;
		flex-direction: column;
		justify-content: space-between;
		color: #999999;
		font-size: 14px;
	}

	.detail_item_des {
		margin-bottom: 200px;
	}

	.img {
		padding-top: 20px;
	}

	.detail_item_img image {
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

	.detail_item_infos {
		color: #000000;
		font-size: 14px;
	}

	.detail_item_info {
		color: #000000;
		font-size: 14px;
		word-break: break-all;
		padding-top: 20px;
	}

	.service_info {
		width: 90%;
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
	}

	.submitButton {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: fixed;
		bottom: 40px;
	}

	.uni-popup__wrapper {
		width: 750px;
		display: block;
		position: relative;
		width: 100%;
	}

	.popup_box {
		width: 100%;
		height: 60%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		background-color: white;
		position: fixed;
		bottom: 0;
	}

	.popup_box_top {
		width: 90%;
		height: 15%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup_box_cancel {
		color: #999999;
	}

	.popup_box_sure {
		color: #1884eb;
	}

	.popup_box_search {
		width: 90%;
		height: 10%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #eeeeee;
		border-radius: 5px;
	}

	.popup_box_list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box_list_line {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.checked_radio_checked {
		color: #1884eb;
	}

	.line_name {
		color: #000000;
		font-size: 14px;
		text-align: center;
		font-weight: bold;
	}

	.line_type {
		font-family: PingFang SC;
		color: #999999;
		font-size: 12px;
		text-align: right;
		padding-left: 10px;
	}
</style>
